<template>
	<view class="praise">
		<view class="top1">
			<view class="top1-item">
				<view class="text1">我的口碑</view>
				<view class="text2">3</view>
			</view>
			<view class="top1-item">
				<view class="text1">口碑推广奖励</view>
				<view class="text3">158积分</view>
			</view>
		</view>
		<view class="top2">
			<view class="color1">我的口碑</view>
			<view>我的好评</view>
		</view>
		<view class="list">
			<view class="item">
				<view class="item-top">
					<view class="it-l"><image src="" mode=""></image></view>
					<view class="it-c">保暖防风加厚羽绒服保暖……</view>
					<view class="it-r"><button class="it-btn">设为口碑</button></view>
				</view>
			</view>
			<view class="item">
				<view class="item-top">
					<view class="it-l"><image src="" mode=""></image></view>
					<view class="it-c">保暖防风加厚羽绒服保暖……</view>
					<view class="it-r"><button class="it-btn">设为口碑</button></view>
				</view>
				<view class="item-center">
					口碑榜：未上榜
				</view>
				<view class="item-bottom">
					<view class="ib-item">
						<view class="text2">1873</view>
						<view class="text1">当前人气</view>
					</view>
					<view class="ib-item">
						<view class="text2">15</view>
						<view class="text1">你的贡献</view>
					</view>
					<view class="ib-item">
						<view class="text3">158</view>
						<view class="text1">可得贡献积分</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.praise {
	width: 100%;
	min-height: 100%;
	position: absolute;
	background-color: #f3f3f3;
	font-size: 26upx;
}
.top1 {
	width: 100%;
	height: 240upx;
	background-color: #fff;
	display: flex;
	padding: 40upx;
}
.top1 .top1-item {
	flex: 1;
	text-align: center;
}
.top1 .top1-item view {
	height: 80upx;
	line-height: 80upx;
}
.top1 .top1-item .text1 {
	font-size: 30upx;
}
.top1 .top1-item .text2 {
	font-size: 60upx;
}
.top1 .top1-item .text3 {
	font-size: 36upx;
	color: #F52A4C;
}
.top2 {
	width: 100%;
	height: 120upx;
	line-height: 120upx;
	display: flex;
	background-color: #fff;
	text-align: center;
	font-size: 30upx;
}
.top2 view {
	flex: 1;
}
.list {
	padding: 20upx 30upx;
}
.list .item {
	width: 100%;
	background-color: #fff;
	margin-bottom: 30upx;
}
.list .item-top {
	width: 100%;
	height: 160upx;
	display: flex;
	padding: 30upx;
}
.list .item-top  .it-l {
	width: 100upx;
	height: 100upx;
	margin-right: 20upx;
}
.list .item-top  .it-l image {
	width: 100upx;
	height: 100upx;
	background-color: #A2A2A2;
}
.list .item-top  .it-c {
	flex: 1;
}
.list .item-top  .it-r {
	width: 135upx;
	margin-left: 20upx;
}
.list .item-top .it-btn {
	font-size: 26upx;
	padding: 0 5upx;
	background-color: #F52A4C;
	color: #fff;
	height: 54upx;
	line-height: 54upx;
}
.list .item-center {
	height: 80upx;
	line-height: 80upx;
	padding: 0 30upx;
}
.list .item-bottom {
	height: 160upx;
	padding: 20upx 30upx;
	display: flex;
}
.list .item-bottom .ib-item {
	flex: 1;
	text-align: center;
}
.list .item-bottom .ib-item view {
	height: 60upx;
	line-height: 60upx;
}
.list .item-bottom .ib-item .text2 {
	font-size: 60upx;
}
.list .item-bottom .ib-item .text3 {
	font-size: 36upx;
}
</style>
